<template>
    <div class="video-flv">
        <video 
          :id="id"
          :class="className"
          :width="width"
          :height="height"
          :muted="muteds"
          :poster="poster"
          controls
          autoplay 
          @click="playVideo" 
          @playing.stop.prevent="videoPlaying" 
          @loadedmetadata="videoLoadedmetadata"
        ></video>
    </div>
</template>
<script>
// import '../../../public/js/flv.min.js';
import  '@/assets/js/flv.min.js';
export default {
    props: {
        playerOption: {
            type: Object,
            default() {
                return {};
            }
        },
        id: {
            type: String,
            default: "videojs-flvjs"
        },
        className: {
            type: String,
            default: ""
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "100%"
        },
        muteds: {
            type: Boolean,
            default: true
        },
        poster: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            videojsFlv: null,
            videoElement: null,
            liveplayer: null,
            paramsData:{ //HJ播放器MediaConfig参数
                type: this.playerOption.type,
                url: this.playerOption.url,
                hasAudio: this.playerOption.status_stream_audio,
                hasVideo: this.playerOption.status_stream,
                isLive: true,
                cors: true,
            },
            settings: {
                ENABLE_CALLBACK: false,
                ENABLE_WARN: false,
                enableWorker: false,
                enableStashBuffer: false,
                stashInitialSize: 128 * 1024,
                lazyLoad: false,
                lazyLoadMaxDuration: 1,
                lazyLoadRecoverDuration: 1,
                deferLoadAfterSourceOpen: false,
                autoCleanupMaxBackwardDuration: 60,
                autoCleanupMinBackwardDuration: 30,
                statisticsInfoReportInterval: 1000,
                fixAudioTimestampGap: false,
                autoCleanupSourceBuffer: true,//自动清除缓存
                enableDurationMonitor: true,  // true表示监测当前直播流延时，当发现延时过大时，主动追赶
                enableVideoFrozenMonitor: true, // 监测视频解码是否停滞（画面卡停），当因为某些原因导致无法解码时，将上报VIDEO_FROZEN事件，收到后建议重拉流
                decreaseDurationStep: 2,  // 每次追赶至缓冲区末尾之前的多少秒
                audioGainLevel: 2,
            },

        };
    },
   mounted() {
        this.init();
    },
    beforeDestroy() {

        this.paramsData.segments && (this.paramsData.segments = undefined);
        if (this.liveplayer) {
            this.liveplayer.unload();
            this.liveplayer.pause();
            this.liveplayer.destroy();
            this.liveplayer = null
            console.log(deep_clone(this.liveplayer))
        }
    },
    methods: {
        init() {
            if (flvjs.isSupported()) {
                this.videoElement = document.getElementById(this.id);
                this.liveplayer = flvjs.createPlayer(this.paramsData, this.settings);
               
                this.liveplayer.on('error', (errType, errDetail)  => {
                    console.info("errorType1:", errType);
                    if ( ['NETWORK_ERROR', 'NetworkError'].includes(errType)) {
                        console.info('网络波动,正在尝试连接中...')
                        this.liveplayer.unload();
                        this.liveplayer.load(this.paramsData.url);
                        this.liveplayer.play();
                    }
                });
                this.liveplayer.on(flvjs.Events.MEDIA_INFO, (data) => {
                    // 媒体文件的长度, 编码信息等
                    console.info('Events.MEDIA_INFO:', data)
                })
                this.liveplayer.on(flvjs.Events.METADATA_ARRIVED, (data) => {
                    // FLV file 的 METADATA 信息
                    console.info('Events.METADATA_ARRIVED:', data)
                })
                this.liveplayer.attachMediaElement(this.videoElement);
                this.liveplayer.load();
                this.liveplayer.play().then(res => {
                    console.log('开始播放...')
                }).catch(res => console.warn(res));
            }
        },
         /**
         * 播放、暂停视频
         */
        playVideo() {
            if (this.videoElement.paused) {
                this.liveplayer.pause();
            } else {
                this.liveplayer.play();
            }
            console.log('playVideo', this.videoElement.paused)
        },
         /**
         * 当音频/视频在因缓冲而暂停或停止后已就绪时触发。
         */
        videoPlaying() {
            // console.log('暂停或播放')
        },
        /**
         * 浏览器已加载音频/视频的元数据时触发，语音的长度之类的数据
         */
        videoLoadedmetadata() {
            // console.log('缓冲...')
        },
    }
};
</script>
<style lang="scss">
.video-flv {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #000000;
    video{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    video::-webkit-media-controls-timeline {
        display: none;
    }
    video::-webkit-media-controls-fullscreen-button {
        display: none;
    }
}
</style>
